<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏宁易购</title>
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
</head>

<body>
    <!-- 顶部广告图 -->
    <div class="top-suning-ad">
        <div class="top-suning-img">
            <img src="https://image5.suning.cn/uimg/cms/img/166754478914115507.png" alt="">
        </div>
        <a href="javascript:;" class="top-suning-btn1"></a>
        <a href="javascript:;" class="top-suning-btn2"></a>
    </div>
    <!-- 顶部导航 -->
    <div class="top-suning-nav">
        <div class="suning-banner w">
            <ul class="suning-nav-left">
                <li>
                    <span>网页导航</span>
                    <i class="iconfont icon-icon-test60"></i>
                    <div class="top-menu">
                        <p>网页导航</p>
                    </div>
                </li>
                <li>
                    <span>商家入驻</span>
                    <i class="iconfont icon-icon-test60"></i>
                    <div class="top-menu">
                        <p>商家入驻</p>
                    </div>
                </li>
                <li>
                    <span>客户服务</span>
                    <i class="iconfont icon-icon-test60"></i>
                    <div class="top-menu">
                        <p>客户服务</p>
                    </div>
                </li>
                <li>
                    <span>网页无障碍</span>
                </li>
                <li>
                    <i class="iconfont icon-icon-test20" style="font-size: 16px; color: #ffaa00;"></i>
                    <span>昆明</span>
                    <i class="iconfont icon-icon-test69" style="color: #bbbbbb;"></i>
                </li>
            </ul>
            <ul class="suning-nav-right">
                <li>
                    <span>请登录</span>
                </li>
                <li>
                    <span style="color: #ff763f;">注册有礼</span>
                </li>
                <li>
                    <span>我的订单</span>
                    <i class="iconfont icon-icon-test60"></i>
                    <div class="top-menu">
                        <p>我的订单</p>
                    </div>
                </li>
                <li>
                    <span>我的易购</span>
                    <i class="iconfont icon-icon-test60"></i>
                    <div class="top-menu">
                        <p>我的易购</p>
                    </div>
                </li>
                <li>
                    <span>苏宁会员</span>
                </li>
                <li>
                    <i class="iconfont icon-icon-test10" style="color: #ff763f;"></i>
                    <span style="color: #ff763f;">购物车</span>
                    <i style="color: #ff763f;">0</i>
                    <i class="iconfont icon-icon-test60" style="color: #dddddd;"></i>
                    <div class="top-menu">
                        <p>购物车</p>
                    </div>
                </li>
                <li>
                    <span>支付宝</span>
                </li>
                <li>
                    <span>企业采购</span>
                </li>
                <li>
                    <span>手机苏宁</span>
                    <i class="iconfont icon-icon-test60"></i>
                </li>
            </ul>
        </div>
    </div>
    <!-- 顶部搜索 -->
    <div class="top-suning-search">
        <div class="w">
            <a href="#">
                <img src="./images/logo.png" alt="">
            </a>
            <div class="search-case">
                <div class="top">
                    <i class="iconfont icon-icon-test12"></i>
                    <input type="text" class="top-search" autofocus placeholder="请输入你要搜索的内容...." value="">
                    <input type="submit" class="top-submit" value="搜索">
                    <ul class="search_list"></ul>
                </div>
                <div class="bottom">
                    <a href="#">手机</a><span>|</span>
                    <a href="#">冰箱</a><span>|</span>
                    <a href="#">电视</a><span>|</span>
                    <a href="#">ipad</a><span>|</span>
                    <a href="#">热水器</a><span>|</span>
                    <a href="#">沙发</a><span>|</span>
                    <a href="#">电饭煲</a><span>|</span>
                    <a href="#">电动车</a><span>|</span>
                    <a href="#">茅台</a><span>|</span>
                    <a href="#">尿不湿</a><span>|</span>
                    <a href="#">红枣</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="nav-suning">
        <div class="w">
            <div class="top-nav">
                <a href="#" class="nav-box1">
                    <i class="iconfont icon-icon-test39"></i>
                    <span>分类</span>
                </a>
                <div class="nav-box2">
                    <li>
                        <a href="#">大聚惠</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">苏宁家电</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">手机数码</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">苏宁超市</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">家具建材</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">生活家电</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">帮客服务</a>
                        <span></span>
                    </li>
                    <li>
                        <a href="#">药品信息</a>
                        <span></span>
                    </li>
                </div>
                <div class="nav-box3">
                    <span>公告:协议规定证照</span>
                </div>
            </div>
        </div>

        <div class="bottom-nav">
            <div class="swiper box">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="background-color: #2b38c4;"> </div>
                    <div class="swiper-slide" style="background-color: #f2f2f2; "> </div>
                    <div class="swiper-slide" style="background-color: #8795ff;"> </div>
                </div>
            </div>

            <div class="w">
                <ul class="nav-left">
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu">
                            <div class="left">
                                <div class="box1">
                                    <h2>空调</h2>
                                    <p>
                                        <a href="#">【优选空调 以旧换新至高省770】</a>
                                        <a href="#">挂机</a>
                                        <a href="#">柜机</a>
                                        <a href="#">变频新风空调</a>
                                        <a href="#">移动空调</a>
                                        <a href="#">空调套餐</a>
                                        <a href="#">1匹</a>
                                        <a href="#">1.5匹</a>
                                        <a href="#">2匹</a>
                                        <a href="#">3匹</a>
                                        <a href="#">美的</a>
                                        <a href="#">格力</a>
                                        <a href="#">海尔</a>
                                        <a href="#">TCL</a>
                                        <a href="#">海信</a>
                                        <a href="#">科龙</a>
                                        <a href="#">华凌</a>
                                    </p>
                                </div>
                                <div class="box1">
                                    <h2>冰箱</h2>
                                    <p>
                                        <a href="#">【优选空调 以旧换新至高省770】</a>
                                        <a href="#">挂机</a>
                                        <a href="#">柜机</a>
                                        <a href="#">变频新风空调</a>
                                        <a href="#">移动空调</a>
                                        <a href="#">空调套餐</a>
                                        <a href="#">1匹</a>
                                        <a href="#">1.5匹</a>
                                        <a href="#">2匹</a>
                                        <a href="#">3匹</a>
                                        <a href="#">美的</a>
                                        <a href="#">格力</a>
                                        <a href="#">海尔</a>
                                        <a href="#">TCL</a>
                                        <a href="#">海信</a>
                                        <a href="#">科龙</a>
                                        <a href="#">华凌</a>
                                    </p>
                                </div>
                                <div class="box1">
                                    <h2>洗衣机</h2>
                                    <p>
                                        <a href="#">【优选空调 以旧换新至高省770】</a>
                                        <a href="#">挂机</a>
                                        <a href="#">柜机</a>
                                        <a href="#">变频新风空调</a>
                                        <a href="#">移动空调</a>
                                        <a href="#">空调套餐</a>
                                        <a href="#">1匹</a>
                                        <a href="#">1.5匹</a>
                                        <a href="#">2匹</a>
                                        <a href="#">3匹</a>
                                        <a href="#">美的</a>
                                        <a href="#">格力</a>
                                        <a href="#">海尔</a>
                                        <a href="#">TCL</a>
                                        <a href="#">海信</a>
                                        <a href="#">科龙</a>
                                        <a href="#">华凌</a>
                                    </p>
                                </div>
                                <div class="box1">
                                    <h2>中央空调</h2>
                                    <p>
                                        <a href="#">【优选空调 以旧换新至高省770】</a>
                                        <a href="#">挂机</a>
                                        <a href="#">柜机</a>
                                        <a href="#">变频新风空调</a>
                                        <a href="#">移动空调</a>
                                        <a href="#">空调套餐</a>
                                        <a href="#">1匹</a>
                                        <a href="#">1.5匹</a>
                                        <a href="#">2匹</a>
                                        <a href="#">3匹</a>
                                        <a href="#">美的</a>
                                        <a href="#">格力</a>
                                        <a href="#">海尔</a>
                                        <a href="#">TCL</a>
                                        <a href="#">海信</a>
                                        <a href="#">科龙</a>
                                        <a href="#">华凌</a>
                                    </p>
                                </div>
                            </div>
                            <div class="right">
                                <a href="#">
                                    <img src="./images/1.jpg" alt="">
                                </a>
                                <a href="#">
                                    <img src="./images/2.jpg" alt="">
                                </a>
                                <a href="#">
                                    <img src="./images/3.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu">
                            <div class="left">
                                <div class="box1">
                                    <h2>热销品牌</h2>
                                    <p>
                                        <a href="#">【优选空调 以旧换新至高省770】</a>
                                        <a href="#">挂机</a>
                                        <a href="#">柜机</a>
                                        <a href="#">变频新风空调</a>
                                        <a href="#">移动空调</a>
                                        <a href="#">空调套餐</a>
                                        <a href="#">1匹</a>
                                        <a href="#">1.5匹</a>
                                        <a href="#">2匹</a>
                                        <a href="#">3匹</a>
                                        <a href="#">美的</a>
                                        <a href="#">格力</a>
                                        <a href="#">海尔</a>
                                        <a href="#">TCL</a>
                                        <a href="#">海信</a>
                                        <a href="#">科龙</a>
                                        <a href="#">华凌</a>
                                    </p>
                                </div>
                                <div class="box1">
                                    <h2>功能类型</h2>
                                    <p>
                                        <a href="#">【优选空调 以旧换新至高省770】</a>
                                        <a href="#">挂机</a>
                                        <a href="#">柜机</a>
                                        <a href="#">变频新风空调</a>
                                        <a href="#">移动空调</a>
                                        <a href="#">空调套餐</a>
                                        <a href="#">1匹</a>
                                        <a href="#">1.5匹</a>
                                        <a href="#">2匹</a>
                                        <a href="#">3匹</a>
                                        <a href="#">美的</a>
                                        <a href="#">格力</a>
                                        <a href="#">海尔</a>
                                        <a href="#">TCL</a>
                                        <a href="#">海信</a>
                                        <a href="#">科龙</a>
                                        <a href="#">华凌</a>
                                    </p>
                                </div>
                                <div class="box1">
                                    <h2>尺寸分类</h2>
                                    <p>
                                        <a href="#">【优选空调 以旧换新至高省770】</a>
                                        <a href="#">挂机</a>
                                        <a href="#">柜机</a>
                                        <a href="#">变频新风空调</a>
                                        <a href="#">移动空调</a>
                                        <a href="#">空调套餐</a>
                                        <a href="#">1匹</a>
                                        <a href="#">1.5匹</a>
                                        <a href="#">2匹</a>
                                        <a href="#">3匹</a>
                                        <a href="#">美的</a>
                                        <a href="#">格力</a>
                                        <a href="#">海尔</a>
                                        <a href="#">TCL</a>
                                        <a href="#">海信</a>
                                        <a href="#">科龙</a>
                                        <a href="#">华凌</a>
                                    </p>
                                </div>
                                <div class="box1">
                                    <h2>家用投影</h2>
                                    <p>
                                        <a href="#">【优选空调 以旧换新至高省770】</a>
                                        <a href="#">挂机</a>
                                        <a href="#">柜机</a>
                                        <a href="#">变频新风空调</a>
                                        <a href="#">移动空调</a>
                                        <a href="#">空调套餐</a>
                                        <a href="#">1匹</a>
                                        <a href="#">1.5匹</a>
                                        <a href="#">2匹</a>
                                        <a href="#">3匹</a>
                                        <a href="#">美的</a>
                                        <a href="#">格力</a>
                                        <a href="#">海尔</a>
                                        <a href="#">TCL</a>
                                        <a href="#">海信</a>
                                        <a href="#">科龙</a>
                                        <a href="#">华凌</a>
                                    </p>
                                </div>
                            </div>
                            <div class="right">
                                <a href="#">
                                    <img src="./images/nav-bottom1.png" alt="">
                                </a>
                                <a href="#">
                                    <img src="./images/nav-bottom2.png" alt="">
                                </a>
                                <a href="#">
                                    <img src="./images/nav-bottom3.png" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页3</span></div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页4</span></div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页5</span></div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页6</span></div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页7</span></div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页8</span></div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页9</span></div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页10</span></div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页11</span></div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页12</span></div>
                    </li>
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页13</span></div>
                    </li>
                    <!-- <li class="active"> -->
                    <li>
                        <i class="iconfont icon-icon-test3"></i>
                        <a href="#">空调/冰箱/洗衣机</a>
                        <div class="nav-menu"><span>详情页14</span></div>
                    </li>
                </ul>
                <div class="swiper box2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="#">
                                <img src="./images/1.jpg" alt="">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <img src="./images/2.jpg" alt="">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <img src="./images/3.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination swiper-paging"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev myswiper-prev myswiper-button-prev"></div>
                    <div class="swiper-button-next myswiper-prev myswiper-button-next"></div>
                    <div class="swiper-goods">
                        <a href="#">
                            <img src="./images/swiper1.jpg" alt="">
                        </a>
                        <a href="#">
                            <img src="./images/swiper2.png" alt="">
                        </a>
                        <a href="#">
                            <img src="./images/swiper3.png" alt="">
                        </a>
                        <a href="#">
                            <img src="./images/swiper4.png" alt="">
                        </a>
                    </div>
                    <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                </div>
                <div class="nav-right">
                    <div class="nav-top">
                        <div class="nav-logo">
                            <img src="./images/tool-logo.png" alt="">
                            <div>
                                <p>Hi，欢迎来到苏宁易购</p>
                                <p><a href="#">登录</a> | <a href="#">注册</a></p>
                            </div>
                        </div>
                        <div class="nav-button">
                            <button>199新人专享</button>
                            <button>开通super尊享特权</button>
                        </div>
                        <div class="nav-renew">
                            <a href="#">
                                <img src="./images/nav-renew1.png" alt="">
                                <p>领红包</p>
                            </a>
                            <a href="#">
                                <img src="./images/nav-renew2.png" alt="">
                                <p>领红包</p>
                            </a>
                            <a href="#">
                                <img src="./images/nav-renew3.png" alt="">
                                <p>抢神劵</p>
                            </a>
                        </div>
                    </div>
                    <div class="nav-bottom">
                        <a href="#">
                            <img src="./images/nav-bottom1.png" alt="">
                            <p>手机电脑</p>
                        </a>
                        <a href="#">
                            <img src="./images/nav-bottom2.png" alt="">
                            <p>苏宁超市</p>
                        </a>
                        <a href="#">
                            <img src="./images/nav-bottom3.png" alt="">
                            <p>家装建材</p>
                        </a>
                        <a href="#">
                            <img src="./images/nav-bottom1.png" alt="">
                            <p>手机电脑</p>
                        </a>
                        <a href="#">
                            <img src="./images/nav-bottom2.png" alt="">
                            <p>苏宁超市</p>
                        </a>
                        <a href="#">
                            <img src="./images/nav-bottom3.png" alt="">
                            <p>家装建材</p>
                        </a>
                        <a href="#">
                            <img src="./images/nav-bottom1.png" alt="">
                            <p>手机电脑</p>
                        </a>
                        <a href="#">
                            <img src="./images/nav-bottom2.png" alt="">
                            <p>苏宁超市</p>
                        </a>
                        <a href="#">
                            <img src="./images/nav-bottom3.png" alt="">
                            <p>家装建材</p>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="javascripts/jQuery.js"></script>
    <script src="javascripts/lazyload.js"></script>
    <script src="swiper/swiper-bundle.min.js"></script>
</body>

</html>